<!-- 成品型号 -->
<template>
  <div>
    <div class="title pl0">
      <h3>成品型号</h3>
    </div>
    <el-table
      :data="formData.productSpecificationList"
      border
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column
        prop="productSpecificationNumber"
        align="center"
        label="成品编码"
      >
      </el-table-column>
      <el-table-column
        prop="productSpecificationName"
        align="center"
        label="型号名称"
      >
      </el-table-column>
      <el-table-column prop="school" align="center" label="启用状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isDisable"
            :active-value="0"
            :inactive-value="1"
            @change="handleSwitchChange(scope.row)"
            size="small"
          />
        </template>
      </el-table-column>
      <el-table-column prop="remark" align="center" label="备注">
      </el-table-column>
      <el-table-column label="操作" width="100px" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEditRow(scope.row,scope.$index)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button
      plain
      style="width: 100%; margin-top: 5px"
      icon="el-icon-plus"
      size="small"
      @click="handleAddProductModel"
    >
      成品型号新建</el-button
    >

    <!-- 成品型号弹出层   -->
    <el-dialog
      title="成品型号-新建"
      :visible.sync="isShowProductModel"
      :close-on-click-modal="false"
      custom-class="comDialog"
      width="30%"
    >
      <div class="dialogDody flex flex_start">
        <div class="flex1">
          <el-form
            ref="personnelForm"
            :model="productModelForm"
            :rules="productModelRules"
            label-width="80px"
            class="dialogForm"
          >
            <el-form-item label="成品编号" prop="productSpecificationNumber">
              <el-input
                v-model="productModelForm.productSpecificationNumber"
                placeholder="系统自动生成"
                disabled
                size="small"
              />
            </el-form-item>
            <el-form-item label="型号名称" prop="productSpecificationName">
              <el-input
                v-model="productModelForm.productSpecificationName"
                placeholder="请输入型号名称"
                size="small"
              />
            </el-form-item>
            <el-form-item label="启用状态" prop="isDisable">
              <el-switch
                :active-value="0"
                :inactive-value="1"
                v-model="productModelForm.isDisable"
                
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                v-model="productModelForm.remark"
                type="textarea"
                :rows="3"
                placeholder="请输入内容"
                size="small"
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="flex flex_between">
          <div>
            <el-checkbox v-model="isproductModelChecked"
              >继续新建下一条</el-checkbox
            >
          </div>
          <div>
            <el-button size="mini" @click="isShowProductModel = false"
              >取 消</el-button
            >
            <el-button
              element-loading-spinner="el-icon-loading"
              type="primary"
              size="mini"
              :loading="loading"
              @click="handleSaveProductModel"
              >保 存</el-button
            >
          </div>
        </div>
      </span>
    </el-dialog>
  </div>
</template>
  
  <script>
export default {
  props: {
    formModels: {
      type: Object,
      default: () => {
        return {}
      },
    },
    productCode: {
      type: String,
      default: () => {
        return "";
      },
    },
  },
  watch: {
    formModels: {
      handler(newVal, oldVal) {
        this.formData.productSpecificationList = JSON.parse(JSON.stringify(newVal.productSpecificationList)) 
      },
    },
  },
  data() {
    return {
      // formModel: {},
      productModelForm: {
        productSpecificationID: 0,
        productSpecificationCode: "",
        productCode: this.productCode,
        productSpecificationNumber: "",
        productSpecificationName: "",
        isDisable: 0,
        remark: "",
      }, //成品型号表单
      loading:false,
      productModelRules: {}, //成品型号验证
      productModelList: [{}], //成品型号表格数据
      isShowProductModel: false, //成品型号弹出层状态
      isproductModelChecked: false, //成品型号是否继续新建下一条
      formObj:{},
      formData:{
        productSpecificationList:[]
      }
    };
  },
  created(){
    this.formObj = JSON.parse(JSON.stringify(this.productModelForm))
  },
  methods: {
    //保存成品型号
    handleSaveProductModel() {
      this.loading = true
      this.$api.business
        .SaveProductSpecification(this.productModelForm)
        .then(() => {
          if(this.isproductModelChecked){
            this.resetForm()
          }else{
            this.isShowProductModel = false;
          }
          this.loading = false
          this.$message.success("保存成功");
          this.getDetail(this.productCode);
        }).catch(()=>{
          this.loading = false
        });
    },

    //新建成品型号
    handleAddProductModel() {
      this.resetForm()
      this.isShowProductModel = true;

    },


    //编辑行
    handleEditRow(row,index){
      this.productModelForm = JSON.parse(JSON.stringify(row)) 
      this.isShowProductModel = true;
    },

    //开关切换事件
    handleSwitchChange(row){
      this.productModelForm = JSON.parse(JSON.stringify(row)) 
      this.handleSaveProductModel()
    },

    //获取详情
    getDetail(id) {
      this.$emit('init','')
    },

    resetForm(){
      this.productModelForm = JSON.parse(JSON.stringify(this.formObj))
    }
  },
};
</script>
  
  <style lang="scss" scoped>
.progress {
  height: 8px;
  background-color: #e4e7f0;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  div {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 100px;
    z-index: 2;
    &:after {
      content: "";
      position: absolute;
      top: -1px;
      left: -1px;
      right: -1px;
      bottom: -1px;
      border-radius: 100px;
      z-index: -1;
    }
  }
}

.title-lable {
  margin-top: 10px;
  display: flex;
}
.item {
  margin-right: 5px;
}
.item > div {
  margin-right: 10px;
}
.item > div:first-child {
  width: 12px;
  height: 6px;
}

.zIndex {
  z-index: 9999;
}

.title h3:before {
  content: "" !important;
  padding-right: 9px !important;
  border-left: 3px solid #3f61f1;
}
</style>
  